<template>
    <MainModule>
        <template #header>
            <MyRowForm :gutter="16" label-width="75px">
                <MyColFormItem :span="6" :label="TableLabel.Id + ': '">
                    <el-input v-model.number="table.selectParams.Id" :placeholder="PlaceholderLabel.Id"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.ShopCode + ': '">
                    <el-input v-model.trim="table.selectParams.ShopCode" :placeholder="PlaceholderLabel.ShopCode"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.Role + ': '">
                    <MySelect v-model="table.selectParams.Role" :options="ParamsObj.Role"></MySelect>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.Username + ': '">
                    <el-input v-model.trim="table.selectParams.Username" :placeholder="PlaceholderLabel.Username"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.Enable + ': '">
                    <MySelect v-model="table.selectParams.Enable" :options="{ 1: '启用', 2: '禁用' }" :value="(_, k) => +k">
                    </MySelect>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.Nickname + ': '">
                    <el-input v-model.trim="table.selectParams.Nickname" :placeholder="PlaceholderLabel.Nickname"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="6" :label="TableLabel.RealName + ': '">
                    <el-input v-model.trim="table.selectParams.RealName" :placeholder="PlaceholderLabel.RealName"
                        clearable></el-input>
                </MyColFormItem>
                <MyColFormItem :span="9" :label="TableLabel.Range + ': '">
                    <el-date-picker v-model="table.selectParams.Range" type="datetimerange" :unlink-panels="true"
                        value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts" start-placeholder="开始时间"
                        end-placeholder="结束时间"></el-date-picker>
                </MyColFormItem>
                <MyColFormItem>
                    <template #col>
                        <el-button type="primary" @click="Add">新增</el-button>
                        <el-button type="success" @click="Select">查询</el-button>
                        <el-button type="warning" @click="Reset">重置</el-button>
                    </template>
                </MyColFormItem>
            </MyRowForm>
        </template>

        <MyTable v-bind="MyTableConfig" :serial="(table.selectParams.Page - 1) * table.selectParams.PageSize + 1">
            <template #operate="{ row }: { row: types.DataType }">
                <el-button type="primary" @click="Edit(row)">编辑</el-button>
            </template>
            <template #Role="{ row }: { row: types.DataType }">
                {{ ParamsObj.Role?.[row.Role] ?? `未知 - ${row.Role}` }}
            </template>
            <template #Enable="{ row }: { row: types.DataType }">
                <el-switch :model-value="row.Enable" inline-prompt size="large" active-text="启用" inactive-text="禁用"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    @change="UpdateEnable(row)"></el-switch>
            </template>
        </MyTable>
        <EditDialog v-model:visible="EditDialogParams.visible" :edit-form="EditDialogParams.editForm"
            :ParamsObj="ParamsObj" @submitSuccess="Select">
        </EditDialog>

        <template #footer>
            <MyPagination :total="table.total" v-model:page-size="table.selectParams.PageSize"
                v-model:current-page="table.selectParams.Page" @change="Select"></MyPagination>
        </template>
    </MainModule>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, shallowRef } from "vue";
import { MainModule, MyTable, MyPagination, MyRowForm, MyColFormItem, MySelect } from "@/components"
import type { MyTableType } from "@/components"
import { ShopEmployeeListApiUrl, ShopEmployeeListApi } from "@/api/shop_manager/shop_employee_list"
import { PaginationParams, shortcuts } from "@/library/common"
import { ParamsObjFormat } from "@/library/utils/tools"
import * as types from "./types"
import { TableLabel, PlaceholderLabel, columns } from "./ConfigData"
import { useMainLoading } from "@/hooks/useMainLoading"
import EditDialog from "./EditDialog.vue"
import { AbortApi } from "@/library/utils/request"
import MessageUti from "@/library/utils/MessageUti"

const { openMainLoading, closeMainLoading } = useMainLoading()

const initForm: types.SelectParamsType = {
    ...PaginationParams
}
const table = reactive({
    selectParams: { ...initForm },
    total: 0,
})

const MyTableConfig = reactive<MyTableType>({
    loading: false,
    table: {
        data: []
    },
    columns
})

const Select = async () => {
    MyTableConfig.loading = true

    try {
        const { Data } = await ShopEmployeeListApi.Select(table.selectParams)
        MyTableConfig.table.data = Data.Data
        table.total = Data.Count
    }
    catch (error) { }
    finally {
        MyTableConfig.loading = false
    }
}

const UpdateEnable = async (row: types.DataType) => {
    const { Id, Enable } = row
    const content = !Enable ? "启用" : "禁用";
    const confirm = await MessageUti.confirm("设置状态", `确定设置为 ${content} 状态嘛?`)
    if (!confirm) { return }

    MyTableConfig.loading = true
    let params: types.SetEnableType = { Id, Enable: !Enable }

    try {
        await ShopEmployeeListApi.SetEnable(params)
        await Select()
        MessageUti.showSuccess("设置成功")
    }
    catch (error) {
        MessageUti.showError("设置失败")
    }
    finally {
        MyTableConfig.loading = false
    }
}

const EditDialogParams = reactive<types.EditDialogType>({
    visible: false,
    editForm: {
        Role: "",
        Username: "",
        Nickname: "",
        RealName: "",
        Id: 0,
    }
})
const Add = () => {
    EditDialogParams.visible = true
}

const Edit = (row: types.DataType) => {
    EditDialogParams.visible = true
    const { Id, Role, Username, Nickname, RealName } = row

    EditDialogParams.editForm = { Id, Role, Username, Nickname, RealName }
}

const ParamsObj = shallowRef<types.ParamsObjType>({})
const Params = async () => {
    try {
        const { Data } = await ShopEmployeeListApi.Params()
        ParamsObj.value = ParamsObjFormat(Data)
    }
    catch (error) { }
}

const Reset = () => {
    table.selectParams = { ...initForm }
}

onMounted(async () => {
    openMainLoading()
    await Select()
    await Params()
    closeMainLoading()
})

onUnmounted(() => {
    AbortApi([ShopEmployeeListApiUrl.Select, ShopEmployeeListApiUrl.Params])
})

</script>

<style scoped></style>